<template>
  <Teleport defer v-if="nodeTreeStore.activeNodeId === node.id" :to="to" class="TeleportForm">
    <q-form>
      <slot :model="model"></slot>
    </q-form>
  </Teleport>
</template>
<script>
import { defineComponent, computed } from 'vue';
import { useNodeTreeStore } from 'src/stores/nodeTree';
export default defineComponent({
  name: 'TeleportForm',
  props: {
    node: {
      type: Object,
      required: true,
    },
    to: {
      type: String,
      default: '#node-form',
    },
  },
  setup(props, { expose }) {
    const nodeTreeStore = useNodeTreeStore();
    const model = computed({
      get() {
        return nodeTreeStore.treeMap[props.node.id].model || {};
      },
      set(val) {
        nodeTreeStore.treeMap[props.node.id].mode = val;
      },
    });
    const updateModel = (key, value) => {
      model.value[key] = value;
    };
    expose({
      updateModel,
    });
    return { nodeTreeStore, model };
  },
});
</script>
<style scope lang="scss">
.TeleportForm {
}
</style>
